<template>
  <div class="credit-page">
    <div class="header">
      <h2>信誉等级</h2>
    </div>

    <div class="credit-rating">
      <el-row type="flex" justify="center" gutter={20}>
        <el-col :span="4" v-for="(level, index) in creditLevels" :key="index">
          <div class="credit-item" :class="{'active': selectedLevel === level}">
            <span class="emoji">{{ level.emoji }}</span>
            <div class="level-name">{{ level.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

<!--    <el-form-item label="选择信誉等级">-->
<!--      <el-select v-model="selectedLevel" placeholder="请选择信誉等级">-->
<!--        <el-option-->
<!--            v-for="(level, index) in creditLevels"-->
<!--            :key="index"-->
<!--            :label="level.name"-->
<!--            :value="level"-->
<!--        ></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->

    <div class="selected-level">
      <p>当前的信誉等级: <b>{{ selectedLevel.name }}</b></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const creditLevels = [
  { name: '优秀', emoji: '😎' },
  { name: '良好', emoji: '🙂' },
  { name: '一般', emoji: '😐' },
  { name: '较差', emoji: '🙁' },
  { name: '糟糕', emoji: '😞' },
]

const selectedLevel = ref(creditLevels[0])  // 默认选中“优秀”
</script>

<style scoped>
.credit-page {
  padding: 20px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.credit-rating {
  margin-top: 20px;
}

.credit-item {
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: transform 0.2s;
}

.credit-item:hover {
  transform: scale(1.1);
}

.credit-item.active {
  background-color: #fffae6;
  border-color: #ffcc00;
}

.emoji {
  font-size: 50px;
}

.level-name {
  margin-top: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.selected-level {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
</style>
